//第四张表
<template>
  <!-- <el-row :gutter="32" class="panel-group" style="width: 100%">
        <el-col :span="8" class="table-panel-col"  style="width: 100px; margin-top:20px;">
            <div class="table-panel" >
            <div class="table-panel-description">
                <div class="table-panel-text">
                   毕业生就业地域分布去向
              </div>
          </div>
            </div>
        </el-col>
    </el-row > -->
  <div class="wrap">
    <el-table
      :data="data"
      :header-cell-style="{ background: '#f9f9f9', color: '#333' }"
      style="width: 80%; margin: 0 auto"
      max-height="400px"
    >
      <el-table-column
        prop="region"
        label="地域"
        header-align="center"
        align="center"
      >
      </el-table-column
      >//更改表格大小

      <el-table-column label="毕业生">
        <el-table-column
          prop="sum"
          label="人数"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="sum_percent"
          label="比例"
          header-align="center"
          align="center"
        >
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>
//表格详细内容
<script>
import * as echarts from "echarts"; //表格数据设置
export default {
  props: ["myStart", "myEnd"],
  created() {
    if (!this.start || !this.end) {
      this.axios({
        url: "grad/yearList",
        methods: "get",
      }).then((res) => {
        let years = res.data.data;

        years = years.sort(function (a, b) {
          return a - b;
        });

        //默认为最近一年
        this.start = years[years.length - 1];
        this.end = years[years.length - 1];
        this.initData(this.start, this.end);
      });
    } else {
      this.initData(this.start, this.end);
    }
  },
  data() {
    return {
      data: [],
      start: this.myStart,
      end: this.myEnd,
    };
  },
  mounted() {},
  methods: {
    count_kind(data) {
      let bendijiuye = 0;
      let feibendijiuye = 0;
      let sum = 0;
      for (let i in data) {
        let cur = data[i]["rate"];
        let num = data[i]["number"];
        let from = data[i]["year"];
        if (from == "0") {
          bendijiuye += num;
        } else if (from == "1") {
          feibendijiuye += num;
        }
        sum += num;
      }
      return [bendijiuye, feibendijiuye];
    },
    initData(start, end) {
      this.axios({
        url: "grad/org_location",
        method: "get",
        params: {
          start: start,
          end: end,
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
        },
      })
        .then((res) => {
          //  调整成输出格式
          let jiuyefangshi = [
            "北京",
            "湖北",
            "广东",
            "浙江",
            "河南",
            "湖南",
            "重庆",
            "安徽",
            "四川",
            "山东",
            "吉林",
            "福建",
            "江西",
            "江苏",
            "上海",
            "广西",
            "海南",
            "陕西",
            "河北",
            "黑龙江",
            "辽宁",
            "云南",
            "天津",
            "山西",
            "甘肃",
            "内蒙古",
            "台湾",
            "澳门",
            "香港",
            "贵州",
            "西藏",
            "青海",
            "新疆",
            "宁夏",
          ];
          let bach = this.count_kind(res.data.data.bachelor);
          let master = this.count_kind(res.data.data.master);
          let result = [];
          // result.push(["product", "本科生", "研究生"]);
          let other = [0, 0, 0];

          let bach_sum = 0;
          let mas_sum = 0;
          let sum_sum = 0;
          for (let i in region) {
            let temp = {};
            temp.region = region[i];
            if (bach[i] != 0 && master[i] != 0) {
              temp.bach = bach[i];
              temp.master = master[i];
              temp.sum = bach[i] + master[i];
              result.push(temp);
            } else {
              other[0] = other[0] + bach[i];
              other[1] = other[1] + master[i];
              other[2] = other[2] + bach[i] + master[i];
            }

            bach_sum += bach[i];
            mas_sum += master[i];
            sum_sum += bach[i] + master[i];
          }
          result.sort(function (a, b) {
            return b.bach - a.bach;
          });
          let chardata = [];
          for (let index = 0; index < result.length; index++) {
            chardata.push(result[index]);
          }
          chardata.push({
            region: "其他",
            bach: other[0],
            master: other[1],
            sum: other[2],
          });

          for (let index = 0; index < chardata.length; index++) {
            chardata[index].bach_percent =
              ((chardata[index].bach / bach_sum) * 100).toFixed(2) + "%";
            chardata[index].mas_percent =
              ((chardata[index].master / mas_sum) * 100).toFixed(2) + "%";
            chardata[index].sum_percent =
              ((chardata[index].sum / sum_sum) * 100).toFixed(2) + "%";
          }
          // console.log(chardata);
          this.data = chardata;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scope>
.wrap {
  width: 100%;
  height: 450px;
}
.panel-group {
  margin-top: 18px;
  height: 100px;
  width: 100%;
  margin-bottom: 18px;
}
.panel-group .table-panel-col {
  margin-bottom: 32px;
}
.panel-group .table-panel {
  cursor: pointer;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  color: #666;
  background: #fff;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.05);
  width: 220px;
}
.panel-group .table-panel .table-panel-icon-wrapper {
  color: #fff;
  float: left;
  margin: 14px 0 0 14px;
  padding: 16px;
  transition: all 0.38s ease-out;
  border-radius: 6px;
}

.panel-group .table-panel .table-panel-icon {
  float: left;
  font-size: 48px;
}
.panel-group .table-panel .table-panel-description {
  float: right;
  font-weight: bold;
  margin: 26px;
  margin-left: 0px;
}

.panel-group .table-panel .table-panel-text {
  line-height: 18px;
  color: rgba(0, 0, 0, 1);
  font-size: 20px;
  margin-bottom: 10px;
}

.panel-group .table-panel .card-panel-num {
  font-size: 20px;
}
</style>
